<template src="./template.html"></template>

<script>
import util from "../../utils/util"
import  system from "../../utils/system.js"
import ubt from '../../utils/ubt.js'
import configMes from '../../utils/configMes.js'
import {previewService} from '@/services'
import { Toast } from "mint-ui"
import _ from 'lodash'
import template0 from '@/components/blankTemplate'
import template1 from '@/previewComponents/template1/app.vue'
import template2 from '@/previewComponents/template2/app'
import template3 from '@/previewComponents/template3/app'
import template6 from '@/previewComponents/template6/app'
import template4 from '@/previewComponents/template4/app'
import template7 from '@/previewComponents/template7/app'
import template8 from '@/previewComponents/template8/app'
import template9 from '@/previewComponents/template9/app'
import template10 from '@/previewComponents/template10/app'
import template11 from '@/previewComponents/template11/app'
import template15 from '@/previewComponents/template15/app'
import template16 from '@/previewComponents/template16/app'
import template20 from '@/previewComponents/template20/app'
import template21 from '@/previewComponents/template21/app'
import template22 from '@/previewComponents/template22/app'
import template23 from '@/previewComponents/template23/app'

import queryString from 'query-string'
const parsed = queryString.parse(location.search);
const code = parsed.code || null;

    export default {
        data() {
            var serverUrl="http://skyforest.static.elab-plus.com";
            return {
                serverUrl:serverUrl,
                templateContentId:'',
                which_to_show:'',//控制模板
                // title:this.shareTitle,
                shareTitle:'',//分享标题
                shareDescription:'',//分享描述
                phone:'',//手机号
                customerId:'',//在线顾问跳转变量
                isSend:'', //是否跟顾问聊过天
                verifyText:'获取验证码',//验证码文案
                templateId:'',//模板ID
                projectId:'',//项目ID
                tfbContentId:'',//投放内容id
                imgUrl:'',//空白模板图片
                verify:'',//验证码
                houseId:'',
                id:null,
                source:4,//来源
                templateType:'',//模板类型
                channel:'',//渠道
                telephone:'',
                showTemp:'blankTemplate',
                sharerImage:'',//二维码
                onlineStatus:1,//是否在线
                sendingCode:false,//控制验证码
                appQrCode:'',//APP二维码
                uid:'',//uid
                onlineFlag:false,//控制在线状态
                showCover:'',//分享图标
                keyvalue:'tfb.laypoint.page.enter',//埋点 key值
                tfbContent1:{},
                isMini:false,
                content:{}
            }
        },
        watch:{
            showTemp(val){
               this.showTemp=val
            }
        },
        mounted() {
            wx.miniProgram.getEnv((res)=> {
                if(res.miniprogram){
                    this.isMini = true
                    console.log("****&&&this.isMini&&",this.isMini,res)
                }
            })
            try {
                window.localStorage.foobar = "foobar";
            } catch(_) {
                Toast({message:'建议您关闭无痕浏览模式',duration: 5000});
            }

            if(sessionStorage.getItem('sid')){
                this.sessionId=sessionStorage.getItem('sid');
            }else{
              sessionStorage.setItem('sid',new Date().getTime());
                this.sessionId=sessionStorage.getItem('sid');
            }

            if(localStorage.getItem('uid')){
                this.uid=localStorage.getItem('uid');
            }else{
              localStorage.setItem('uid', configMes.getUuid());
                this.uid=localStorage.getItem('uid');
            }
            //this.projectId = this.$route.query.projectId;

            this.templateContentId = this.$route.query.templateContentId;
            // this._appQrcode = localStorage.getItem('_appQrcode');
            // console.log(this._appQrcode)
            sessionStorage.setItem('tempprojectId',this.$route.query.projectId);
            sessionStorage.setItem('tempContentId',this.$route.query.templateContentId);
            if(this.$route.query.projectId){//绑定小程序
                this.detailByProjectId();
                //this.source = 3;
            }
            if(this.templateContentId){//未绑定小程序
                this.detailById();
                //this.source = 4;
            }
            if(system.isIosApp()){
                this.source = 1;
            }
            if(system.isAndroidApp()){
                this.source = 2;
            }
            // if(this.sendingCode){
            //     this.getVerifyFn();
            // }

            try{
                 window.getWidth= function(){
                    if(window.innerWidth!= undefined){
                        return window.innerWidth;
                    }
                    else{
                        var B= document.body, D= document.documentElement;
                        return B==null?D.clientWidth:Math.min(D.clientWidth, B.clientWidth);
                    }
                }
                console.log("******^^^^^^",window.getWidth())
                let mywidth= window.getWidth() > 640?"640":window.getWidth();
                document.documentElement.style.fontSize = 100 * mywidth / 750 + 'px';
            }
            catch(e){
                alert(e.message);
            }

            // this.telephone = this.$store.state.tfbContent1.telephone;
            // this.appQrCode = this.$store.state.tfbContent1.appQrCode;
            // this.projectId = this.$store.state.tfbContent1.projectId;
            // this.tfbContentId = this.$store.state.tfbContent1.id;
            // console.log('仓库',this.$store.state.tfbContent1.appQrCode)
        },
        components:{
            // 'template0':previewTemplate0,//空白模板
            // 'template1':previewTemplate1,//模板1
            // 'template2':previewTemplate2,//模板2
            'template0':template0,
            'template1':template1,
            'template2':template2,
            'template3':template3,
            'template4':template4,
            'template5':template2,
            'template6':template6,
            'template7':template7,
            'template8':template8,
            'template9':template9,
            'template10':template10,
            'template11':template11,
            'template12':template2,
            'template13':template2,
            'template14':template2,
            'template15':template15,
            'template16':template16,
            'template20':template20,
            'template21':template21,
            'template22':template22,
            'template23':template23,
        },
        beforeDestroy(){
            document.documentElement.style.fontSize ='16px';
        },
        updated(){

        },
        created(){

            if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                 window.addEventListener("popstate", function(e) {
                console.log("后退");
                self.location.reload();
            }, false);
            var state = {
                title : "",
                url : "#"
            };
            window.history.replaceState(state, "", "");
                var isPageHide = false;
                window.addEventListener('pageshow', function () {
                    if (isPageHide) {
                        window.location.reload();
                    }
                });
                window.addEventListener('pagehide', function () {
                    isPageHide = true;
                });
            }
        },
        methods: {
            async layPointFn(){//进入页面埋点
                let data = {
                    projectId:this.projectId,
                    system:this.source,
                    tfbContentId:this.id,
                    uid:this.uid,
                    version:"1.0",
                    sessionId:this.sessionId,
                    source:this.source,
                    keyvalue:this.keyvalue
                    //keyvalue:"tfb.laypoint.page.enter"
                }
                console.log(data,'//////////////')
                let result = await previewService.layPoint(data);
                if(result.data.success){

                }
            },
            async detailByProjectId(){//根据项目ID获取模板内容
                let data = {
                    projectId:this.$route.query.projectId
                };
                let result = await previewService.detailByProjectId(data);
                if(result.data.success){
                    if(result.data.single.onlineStatus==-1){
                        this.onlineStatus = false
                    }else{
                         this.templateType = result.data.single.templateId;
                         if(this.templateType===0){
                             this.imgUrl = JSON.parse(result.data.single.content).imgUrl;
                             this.showTemp = 'blankTemplate'
                        }
                        result.data.single.content = result.data.single.content.replace(/\\n/g,'</br>');
                        // console.log("******",result.data.single.content,typeof result.data.single.content);
                        this.content =JSON.parse(result.data.single.content)
                        // this.content.text2 = this.content ? this.content.text2.replace('\n','</br>'):this.content.text2;
                        //this.appQrcode = result.data.single.appQrCode;
                        //this.telephone =  result.data.single.telephone;
                        this.id = result.data.single.contentId;
                        this.projectId = result.data.single.projectId;
                        this.houseId = result.data.single.houseId;
                         this.showTemp = `template${this.templateType}`
                        if(this.houseId==102){//重庆
                            this.showCover = 'http://skyforest.static.elab-plus.com/sky-forest-log.png'
                        }else if(this.houseId==109){//宁波
                            this.showCover = 'http://skyforest.static.elab-plus.com/wiii-logo.png'
                        }

                        this.tfbContent1.id = result.data.single.contentId;
                        this.tfbContent1.projectId = result.data.single.projectId;
                        this.tfbContent1.houseId = result.data.single.houseId;
                        this.tfbContent1.telephone = result.data.single.telephone;
                        this.tfbContent1.appQrCode = result.data.single.appQrCode;
                        this.tfbContent1.address   = result.data.single.address  ;  // 地址
                        this.tfbContent1.owner   = result.data.single.owner  ;      // 开发商

                        this.$store.dispatch('tfbContent1',this.tfbContent1);
                        this.shareTitle = result.data.single.shareTitle||'';
                        this.shareDescription = result.data.single.shareDescription;
                        this.onlineStatus =  true
                        util.setTitle(this.shareTitle);
                        this.layPointFn();
                        system.initShareMeta({
                            title: this.shareTitle,
                            desc: this.shareDescription,
                            type: 'url',
                            cover: this.showCover
                        });
                    }
                    console.log('丁香花1',result,this.appQrcode,typeof this.content.finalImg,this.content.finalImg)


                }
                //console.log(result,'---------根据项目ID获取模板内容---------',JSON.parse(result.data.single.content))
            },
            async detailById(){//根据内容ID获取模板内容

              let data = {
                    id:this.templateContentId
                };
                let result = await previewService.detailById(data);
                if(result.data.success){

                    if(result.data.single.onlineStatus==-1){
                        this.onlineStatus = false
                    }else{

                         this.templateType = result.data.single.templateId;
                         if(this.templateType===0||this.templateType==''){
                            this.imgUrl = JSON.parse(result.data.single.content).imgUrl;
                            this.showTemp = 'blankTemplate'
                        }
                        this.onlineStatus = true
                        //this.appQrcode = result.data.single.appQrCode;
                        //this.telephone =  result.data.single.telephone;
                        this.projectId = result.data.single.projectId;
                        this.id = result.data.single.contentId;
                        result.data.single.content = result.data.single.content.replace(/\\n/g,'</br>');
                        // console.log("******",result.data.single.content,typeof result.data.single.content);
                        this.content =JSON.parse(result.data.single.content)
                        console.log(this.content,'ppppppppppppp')
                        this.houseId = result.data.single.houseId;
                        this.showTemp = `template${this.templateType}`
                        if(this.houseId==102){//重庆
                            this.showCover = 'http://skyforest.static.elab-plus.com/sky-forest-log.png'
                        }else if(this.houseId==109){//宁波
                            this.showCover = 'http://skyforest.static.elab-plus.com/wiii-logo.png'
                        }
                        this.shareTitle = result.data.single.shareTitle||'';
                        this.shareDescription = result.data.single.shareDescription;
                        this.onlineStatus = true;

                        this.tfbContent1.id = result.data.single.contentId;
                        this.tfbContent1.projectId = result.data.single.projectId;
                        this.tfbContent1.houseId = result.data.single.houseId;
                        this.tfbContent1.telephone = result.data.single.telephone;
                        this.tfbContent1.appQrCode = result.data.single.appQrCode;
                        this.tfbContent1.address   = result.data.single.address||""  ;  // 地址
                        this.tfbContent1.owner   = result.data.single.owner||""  ;      // 开发商
                        // console.log(this.tfbContent1)
                        this.$store.dispatch('tfbContent1',this.tfbContent1);
                        console.log('that girl',this.$store.state.tfbContent1,typeof this.$store.state.tfbContent1.appQrCode,'==========')
                        util.setTitle(this.shareTitle);
                        this.layPointFn();
                        system.initShareMeta({
                            title: this.shareTitle,
                            desc: this.shareDescription,
                            type: 'url',
                            cover: this.showCover
                        });
                    }
                    console.log('丁香花2',result)

                }
                //console.log(result,'--------内容ID获取模板内容----------',JSON.parse(result.data.single.content))
            },
        }
    }
</script>

<style>
    .el-carousel__button{
        width: .3rem;
    }
</style>

